<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>个人中心-青灯论坛</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/global.css">
    <link rel="stylesheet" href="/static/css/user.css">
</head>
<body>
<div class="layui-header header">
    <div class="layui-container">
        <div class="header-demo">
            <!-- 头部 logo -->
            <a href="/" class="logo">
                <img src="/static/images/logo.png" alt="">
            </a>
            {% block menu %}
                <!-- 中间分类栏 -->
                <ul class="menu">
                    {% for cate in cate_list %}
                        <li><a href="/?cid={{ cate.id }}">{{ cate.name }}</a></li>
                    {% endfor %}
                </ul>
            {% endblock %}
            <!--登录注册栏-->
            <div class="login-btn">
                {% if current_user.is_active %}
                    <a href="/account">{{ current_user.nick_name }}</a>
                    <a href="/logout">退出</a>
                    {% if current_user.is_admin %}
                        <a href="/admin">admin</a>
                    {% endif %}
                {% else %}
                    <a href="/login" class="login_btn">登录</a> /
                    <a href="/register" class="register_btn">注册</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!--中间内容部分-->
<div class="layui-container">
    <!--新闻列表-->
    <div class="layui-row main" style="margin-top: 20px">
        <div class="layui-col-md4">
            <!--个人详情数据展示-->
            {% block profile %}
                <div class="profile-menu">
                    <div class="profile-picture">
                        <img src={{ current_user.avatar_url }}>
                    </div>
                    <div class="profile-name">{{ current_user.nick_name }}</div>
                    <!--个人信息操作列表-->
                    <ul class="profile-option-list">
                        <li data-active="baseinfo"><a href="./baseinfo">基本资料</a></li>
                        <li data-active="followed"><a href="./followed">我的关注</a></li>
                        <li data-active="collection"><a href="./collection">我的收藏</a></li>
                        <li data-active="articles"><a href="./articles">文章列表</a></li>
                        <li data-active="article_release"><a href="./article_release">文章发布</a></li>
                    </ul>
                </div>
            {% endblock %}
        </div>
        <div class="layui-col-md8">
            <div class="user_con fr">
                {% block main %}

                {% endblock %}
            </div>
        </div>
    </div>
</div>

<script src="/static/layui/layui.js"></script>
{#根据url高亮个人信息选择#}
<script>
  layui.use(['jquery'], function() {
    let $ = layui.jquery;
    let arr = location.pathname.split('/');
    let class_name = arr[arr.length - 1];
    $(`[data-active="${class_name}"]`).addClass('active');
  });
</script>
{% block footer_script %}

{% endblock %}
</body>
</html>
